import { useState } from 'react'; 
import ChildA1 from './ChildA1';
import ChildA2 from './ChildA2';
import ChildA3 from './ChildA3';
import Demo01Context from './Demo01Context';

//主组件
const Demo01 = () => {
	const [count1, setCount1] = useState(11);
	const [count2, setCount2] = useState(66);

	return <div className="note-example-box">
		<div className="note-example-intro">通过 createContext 共享多组件之间的数据、函数通信。</div>
		<button onClick={() => {setCount1(count1 + 1)}}>count1:{count1}</button>
		<button onClick={() => {setCount2(count2 - 1)}}>count2:{count2}</button>
		<div className="note-demo-parent-box">
			<Demo01Context.Provider value={{ count1, setCount1, count2, setCount2 }}>
				<ChildA1></ChildA1>
				<ChildA2></ChildA2>
				<ChildA3></ChildA3>
			</Demo01Context.Provider>
		</div>
		<div className="note-code-case">
			<textarea defaultValue={codeVal1} style={{height: '100px'}}></textarea>
			<textarea defaultValue={codeVal2} style={{height: '560px'}}></textarea>
			<textarea defaultValue={codeVal3} style={{height: '660px'}}></textarea>
		</div>
	</div>;
}

const codeVal1 = `Demo01Context.jsx
import { createContext } from 'react';
const Demo01Context = createContext(null);
export default Demo01Context;`;
const codeVal2 = `主组件
import { useState } from 'react'; 
import ChildA1 from './ChildA1';
import ChildA2 from './ChildA2';
import ChildA3 from './ChildA3';
import Demo01Context from './Demo01Context';

//主组件
const Demo01 = () => {
	const [count1, setCount1] = useState(11);
	const [count2, setCount2] = useState(66);

	return <div className="note-example-box">
		<div className="note-example-intro">通过 createContext 共享多组件之间的数据、函数通信。</div>
		<button onClick={() => {setCount1(count1 + 1)}}>count1:{count1}</button>
		<button onClick={() => {setCount2(count2 - 1)}}>count2:{count2}</button>
		<div className="note-demo-parent-box">
			<Demo01Context.Provider value={{ count1, setCount1, count2, setCount2 }}>
				<ChildA1></ChildA1>
				<ChildA2></ChildA2>
				<ChildA3></ChildA3>
			</Demo01Context.Provider>
		</div>
	</div>;
}
`;
const codeVal3= `子组件群
import Demo01Context from './Demo01Context';
import { useContext } from 'react'; 

//子组件-1
const ChildA1 = () => {
	const { count1, setCount1, count2, setCount2 } = useContext(Demo01Context);
	return <div className="note-demo-child-box">
		<div>ChildA1</div>
		<button onClick={() => {setCount1(count1 + 1)}}>count1:{count1}</button>
		<button onClick={() => {setCount2(count2 - 1)}}>count2:{count2}</button>
	</div>
}
const ChildA2 = () => {
	const { count1, setCount1, count2, setCount2 } = useContext(Demo01Context);
	return <div className="note-demo-child-box">
		<div>ChildA2</div>
		<button onClick={() => {setCount1(count1 + 1)}}>count1:{count1}</button>
		<button onClick={() => {setCount2(count2 - 1)}}>count2:{count2}</button>
	</div>
}
const ChildA3 = () => {
	const { count1, setCount1, count2, setCount2 } = useContext(Demo01Context);
	return <div className="note-demo-child-box">
		<div>ChildA3</div>
		<button onClick={() => {setCount1(count1 + 1)}}>count1:{count1}</button>
		<button onClick={() => {setCount2(count2 - 1)}}>count2:{count2}</button>
	</div>
}
`;

export default Demo01;
